.panel-list {
  padding: 11px 0 0;
  user-select: none;
  // 头
  .header {
    align-items: center;

    .header-title {
      color: #b1b1b1;
      display: flex;
      justify-content: space-between;
      padding: 5px 0;
      // 数据源 算子  icon
      .type-icon-name {
        align-items: center;
        display: flex;
        font-size: 20px;

        .data-operator {
          color: #5d637e;
          font-size: 14px;
          font-weight: 700;
          letter-spacing: 1px;
          margin-left: 10px;
        }
      }

      // 加载数据  新增算子
      .load-project-data {
        align-items: center;
        background-color: #fff;
        border: 1px solid #5561ff;
        border-radius: 11px;
        color: #5561ff;
        cursor: pointer;
        display: flex;
        font-size: 14px;
        height: 22px;
        justify-content: center;
        line-height: 22px;
        padding: 0 5px;
        text-align: center;

        span {
          color: #5561ff;
          height: 22px;
        }

        &:hover {
          background-color: #6570ff;
          color: #fff;

          span {
            color: #fff;
          }
        }


      }
    }

    .name {
      color: #4b4b4b;
    }
  }

  // 搜索
  .search-box-cont {
    align-items: center;
    display: flex;
    height: 32px;
    margin-top: 12px;
    position: relative;
    width: 100%;

    // 搜索框圆角
    /deep/ .ant-input-affix-wrapper {
      .ant-input {
        border-radius: 16px;
      }
    }
  }

  // 所有ul
  ul {
    color: #4d4d4d;
    font-size: 16px;
    list-style-type: none;
    padding-left: 0;
    // 展开
    // .expanded > .header {
    //   color: #6570ff;
    // }

    li {
      cursor: pointer;
    }

    // 箭头
    .collapsible-icon {
      padding-right: 3px;
    }

    .folder-icon {
      font-size: 21px;
      // margin: 0 5px;
      margin-right: 5px;
    }

    .header {
      display: flex;
      flex-direction: row;
      height: 100%;

      .label {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 140px;
      }

      .operator-reject {
        cursor: not-allowed;
      }
    }

    .actions {
      align-items: center;
      display: flex;
      height: 100%;
      margin-left: auto;

      > span {
        display: inline-block;
        height: 20px;
      }
    }
  }

  .tranning-part {
    border-top: 1px solid #e8e8e8;
    bottom: 0;
    display: flex;
    justify-content: center;
    margin: 0 -8px;
    padding: 16px 24px;

    .btn {
      align-items: center;
      background: #6973ff;
      border-radius: 16px;
      cursor: pointer;
      display: flex;
      flex-shrink: 0;
      height: 32px;
      justify-content: center;
      width: 132px;

      .icon {
        color: #fff;
        font-size: 20px;
      }

      span {
        color: #fff;
        font-size: 14px;
        margin-left: 4px;
      }
    }
  }
}

// 算子组内item  数据item
.items {
  margin: 1px 0;

  > li {
    color: #5d637e;
    font-size: 14px;
    // height: 30px !important;
    letter-spacing: 1px;
    margin: auto 0;

    .header {
      .label {
        height: 100%;
        line-height: 30px;

        .item-icon {
          font-size: 20px;
          margin-right: 6px;
          vertical-align: middle;
        }

        .label-text {
          vertical-align: middle;
        }
      }
    }
  }


  // 菜单打开
  .menu-open {
    background-color: #eff0fe;
  }
}

.hover-item {
  // hover
  &:hover {
    background-color: #eff0fe;
  }
}

@keyframes fade {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1;
  }
}

.highlight {
  animation: fade 800ms 3;
  border-color: #5561ff;
  box-shadow: 0 0 1px #5561ff;
  // background-color: #eff0fe;
  transition: border linear 0.2s, -webkit-box-shadow linear 0.5s;
}


/*
 group （operatorList）
*/
.groups {
  height: calc(100% - 75px);
  margin: 0;
  overflow-y: auto;
  padding: 10px 0;

  > li {
    font-size: 14px;

    > .header {
      height: 40px;
      position: relative;

      .label {
        align-items: center;
        display: flex;

        .group-icon {
          font-size: 20px;
          margin-right: 6px;

        }
      }

      .add-btn {
        color: #5d637e;
        font-size: 18px;
        position: absolute;
        right: 0;
      }
    }

    .items {
      > li {
        color: #5d637e;
        font-size: 14px;
        letter-spacing: 1px;
        // height: 30px;
        line-height: 30px;
        margin: auto 0;
        padding-left: 17px;
      }
    }

    .models {
      > li {
        color: #5d637e;
        font-size: 14px;
        height: 30px;
        letter-spacing: 1px;
        margin: auto 0;
        padding-left: 17px;
      }
    }
  }
}

// 模型
.models {
  margin: 1px 0;

  > li {
    color: #5d637e;
    font-size: 14px;
    height: 30px;
    letter-spacing: 1px;
    margin: auto 0;

    .header {
      .label {
        height: 100%;
        line-height: 30px;

        .item-icon {
          font-size: 20px;
          margin-right: 6px;
          vertical-align: middle;
        }

        .label-text {
          vertical-align: middle;
        }
      }
    }
  }

  // hover
  li:hover {
    background-color: #eff0fe;
  }

  // 菜单打开
  .menu-open {
    background-color: #eff0fe;
  }
}

// 搜索结果
.results {
  margin-bottom: 0;
  margin-left: 10px;
  padding: 10px 0;

}

// 无搜索结果
.no-result {
  align-items: center;
  color: #888;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  padding: 9px 10px 0;
}

.items .header,
.models .header,
.results .header {
  position: relative;

  .header-btn {
    display: none;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }

  &:hover .header-btn {
    display: block;
  }

  .header-btn.menu-opened {
    color: #6570ff;
    display: block;

  }
}

.header-btn:hover {
  color: #6570ff;
}


// 修改 编辑菜单(不嵌套)
.menu-item-btn {
  display: inline-block;
  // text-align: center;
  width: 100%;
}

/deep/ .ant-dropdown-menu {
  padding: 0;
}

.dragging {
  background-color: #fff;
  border: 2px solid #c5c9ff;
  box-shadow: 0 0 5px rgba(88, 98, 230, 0.2);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  font-size: 14px;
  justify-content: center;
  margin: 0 auto;
  opacity: 0.8;
  position: absolute;
  text-align: center;
  user-select: none;
  z-index: 61;

  .type-icon {
    display: flex;
    font-size: 34px;
    height: 34px;
    justify-content: center;
    line-height: 34px;
    width: 34px;

    .type-icon-color {
      color: #fff;
    }
  }

  .dragging-name {
    background-color: transparent;
    display: flex;
    height: 20px;
    justify-content: center;
    position: absolute;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.scroll-bar {
  &::-webkit-scrollbar {
    height: 4px;
    width: 4px;
  }

  &::-webkit-scrollbar-track {
    background: rgb(239, 239, 239);
    border-radius: 2px;
  }

  &::-webkit-scrollbar-thumb {
    background: #bfbfbf;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: #888;
  }

  &::-webkit-scrollbar-button {
    background-color: #f1f1f1;
    height: 6px;
    width: 6px;
  }
}
